<template>
  <div>
    <el-form ref="addTmRef" :model="baseForm" :rules="rules" label-width="auto">
      <el-form-item label="遥测集名称" prop="name">
        <el-input v-model="baseForm.name"></el-input>
      </el-form-item>
      <el-form-item label="遥测列表">
        <TranferTms v-model="baseForm.ids" />
      </el-form-item>
      <el-form-item>
        <el-col :offset="18">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submitForm">保存</el-button>
        </el-col>        
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { onBeforeMount, onBeforeUnmount, ref } from 'vue'
import TranferTms from './TransferTms.vue'
import {failedNotify, successNotify, deepClone} from '@/comm/index.js'
import { addUtm } from '@/api/loads-api.js'
import { useTmStore } from '@/stores/tm-module.js'

const addTmRef = ref(null)
const baseForm = ref({
  name: '',
  ids: []
})
const rules = {
  name: { required: true, messsage: '必填' },
  ids: { required: true, messsage: '必填' }
}
const emit = defineEmits(['close'])
const tmStore = useTmStore()

onBeforeMount(() => {
  const edTmForm = tmStore.edUdTmObj
  if(edTmForm !== null) {
    baseForm.value = deepClone(edTmForm)
  }
})

onBeforeUnmount(() => {
  tmStore.setEdUdObj(null)
})

const submitForm = () => {
  addTmRef.value.validate((valid) => {
    if(valid) {
      const reqJson = baseForm.value
      addUtm(reqJson, (response) => {
        successNotify('设置成功')
        emit('close')
      }, (error) => {
        failedNotify('设置失败:', error)
      })
    }
  })
}

const cancel = () => {
  addTmRef.value.resetFields()
  emit('close')
}
</script>

<style lang="scss" scoped>

</style>